<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row sum-text="合计" :data="list" v-loading.body="listLoading" border element-loading-text="Loading" size="mini">
        <el-table-column align="center" prop="time" label="时间"></el-table-column>
        <el-table-column align="center" label="门店名称">
          <template slot-scope="scope">
            {{scope.row.store_name}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="出货数（个）">
          <template slot-scope="scope">
            <router-link :to="{name:'report/storeDay_ditail',params :{store_id:scope.row.store_id,time:scope.row.time}}">
              {{scope.row.unitsshipped}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成本（元）">
          <template slot-scope="scope">
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getStoreList } from "@/api/storage_control/storeDay_form";
import { pickerOptionsF, pickerDateF, optionMaxTime } from "@/utils";
export default {
  data() {
    return {
      typeList: [{ id: 1, name: "门店仓" }, { id: "2", name: "公司仓" }],
      list: [],
      listLoading: false,
      detailDialog: false,
      dialogTitle: "",
      val1: "",
      val2: "",
      val3: "",
      val4: "",
      storeList: null,
      detailList: [],
      formInline: {
        store_id: "",
        begin_time: "",
        end_time: "",
        look_del: "0"
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    // 获取门店
    getStore() {
      getStoreList({
        look_del: this.formInline.look_del,
        category_id: 237
      }).then(response => {
        this.storeList = response;
        let data = response.filter(
          res => res.id == this.$store.getters.optionId
        );
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : "";
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : "";
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          this.list = response;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.cell a {
  color: #409eff;
}
</style>